<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <el-card style="height: 650px;margin-top: 20px">
            <quill-editor v-model="content" ref="myQuillEditor" style="height: 560px;" :options="editorOption">
                <!-- 自定义toolar -->
                <div id="toolbar" slot="toolbar">
                    <!-- Add a bold button -->
                    <button class="ql-bold" title="加粗">Bold</button>
                    <button class="ql-italic" title="斜体">Italic</button>
                    <button class="ql-underline" title="下划线">underline</button>
                    <button class="ql-strike" title="删除线">strike</button>
                    <button class="ql-blockquote" title="引用"></button>
                    <button class="ql-code-block" title="代码"></button>
                    <button class="ql-header" value="1" title="标题1"></button>
                    <button class="ql-header" value="2" title="标题2"></button>
                    <!--Add list -->
                    <button class="ql-list" value="ordered" title="有序列表"></button>
                    <button class="ql-list" value="bullet" title="无序列表"></button>
                    <!-- Add font size dropdown -->
                    <select class="ql-header" title="段落格式">
                        <option selected>段落</option>
                        <option value="1">标题1</option>
                        <option value="2">标题2</option>
                        <option value="3">标题3</option>
                        <option value="4">标题4</option>
                        <option value="5">标题5</option>
                        <option value="6">标题6</option>
                    </select>
                    <select class="ql-size" title="字体大小">
                        <option value="10px">10px</option>
                        <option value="12px">12px</option>
                        <option value="14px">14px</option>
                        <option value="16px" selected>16px</option>
                        <option value="18px">18px</option>
                        <option value="20px">20px</option>
                        <option value="20px">24px</option>
                        <option value="20px">28px</option>
                        <option value="20px">32px</option>
                    </select>
                    <select class="ql-font" title="字体">
                        <option value="SimSun">宋体</option>
                        <option value="SimHei">黑体</option>
                        <option value="Microsoft-YaHei">微软雅黑</option>
                        <option value="KaiTi">楷体</option>
                        <option value="FangSong">仿宋</option>
                        <option value="Arial">Arial</option>
                    </select>
                    <!-- Add subscript and superscript buttons -->
                    <select class="ql-color" value="color" title="字体颜色"></select>
                    <select class="ql-background" value="background" title="背景颜色"></select>
                    <select class="ql-align" value="align" title="对齐"></select>
                    <button class="ql-clean" title="还原"></button>
                    <!-- You can also add your own -->
                </div>
            </quill-editor>
        </el-card>
        <el-row>
            <el-col :offset="22" :span="2" style="margin-top: 20px">
                <el-button type="primary" @click="saveHtml">提交</el-button>

            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        Quill,
        quillEditor
    } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import qs from 'qs'
    import breadcrumb from '@/components/breadcrumb.vue'
    //引入font.css
    import '@/assets/css/font.css'
    // 自定义字体大小
    let Size = Quill.import('attributors/style/size')
    Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
    Quill.register(Size, true)

    // 自定义字体类型
    var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
        '宋体', '黑体'
    ]
    var Font = Quill.import('formats/font')
    Font.whitelist = fonts
    Quill.register(Font, true)

    export default {
        name: 'FuncFormsEdit',
        components: {
            quillEditor,
            breadcrumb
        },
        created(){
            if(this.$route.query){
                this.agreementId = this.$route.query.id
                this.getAgreement()
            }
        },
        data() {
            return {
                agreementId:'',
                content: null,
                editorOption: {
                    placeholder: "请输入",
                    theme: "snow", // or 'bubble'
                    modules: {
                        toolbar: {
                            container: '#toolbar'
                        }
                    }
                },
            }
        },
        computed:{
            routerList:function(){
                let routerList = [
                    {
                        path:'/agreement',
                        name:'协议管理'
                    }
                ]
                let name = '';
                if(this.agreementId == 1){
                    name = '天赋能商城保证金保障服务协议'
                }
                if(this.agreementId == 2){
                    name = '天赋能商城店名及店铺信息发布规则'
                }
                if(this.agreementId == 4){
                    name = '天赋能商城平台服务、结算服务协议'
                }
                if(this.agreementId == 5){
                    name = '天赋能商城物流代发服务协议'
                }
                if(this.agreementId == 3){
                    name = '天赋能商城供应商管理规范'
                }
                if(this.agreementId == 6){
                    name = '天赋能商城用户服务协议及隐私政策'
                }
                routerList.push({
                    path:'/',
                    name:name
                })
                return routerList
            }
        },
        methods:{
            saveHtml(){
                console.log('save html');
                this.uploadAgreement()
            },
            async uploadAgreement(){
                console.log(this.content);
                let pro = qs.stringify({
                    id:this.agreementId,
                    content:this.content
                })
                let res = await this.$Http.uploadAgreement(pro)
                console.log(res);
                if(res.code==200){
                    this.$message.success('本协议已提交成功！')
                }else{
                    this.$message.info('您未修改嫌疑信息，请修改后，提交！')
                }
            },
            async getAgreement(){
                let res = await this.$Http.getAgreement({
                    id:this.agreementId
                })
                console.log(res);
                if(res){
                    this.content = res.content
                }
            }
        }
    }
</script>

<style scoped>
</style>
